<template>
    <div class="clock_index_page"> 
        <van-nav-bar
            title="练声打卡"
            left-text="返回" 
            left-arrow
            @click-left="onClickLeft"  
        /> 
        <div class="header">
            <div class="clock_head_box ">
            <div class="title">标题标题</div>
            <div class="head_box">
                <div class="head_img">
                    <van-image
                        round
                        width="100%"
                        height="100%"
                        src="https://img.yzcdn.cn/vant/cat.jpeg"/>
                </div>
                <div class="info-text">
                    <span>132132人参与</span>
                    <span>132132人参与</span>
                </div>
            </div> 
            <div class="clock_head_tabs">
                <div class="clock_tabs_item">
                        <div class="flex_item text-center">
                            <p class="iconfont icon-paihangbang"></p>
                            <p class="">排行榜</p>
                        </div>
                        <div class="flex_item text-center">
                            <p class="iconfont icon-riqian"></p>
                            <p class="">日签</p>
                        </div>
                        <div class="flex_item text-center">
                            <p class="iconfont icon-mn_tianjiahaoyou"></p>
                            <p class="">邀请好友</p>
                        </div>
                </div>
            </div>
            </div>
        </div>  
        <van-tabs v-model="activeName" class="clock_content"  color="#39DEC7">
            <van-tab title="日记" name="日记">
                日记
            </van-tab>
            <van-tab title="课时" name="课时">课时</van-tab>
            <van-tab title="详情" name="详情">详情</van-tab>
            <van-tab title="成员" name="成员">成员</van-tab>
        </van-tabs> 
    </div>
</template>

<script> 

export default { 
  created (){

  },
  data () {
    return {
        activeIcon:0,
        activeName:'日记'
    }
  },
  methods:{
        onClickLeft(){
            this.$router.go(-1);
        },
        selectNav (val){
            let vm=this;
            vm.activeIcon=val;
            setTimeout(()=>{
                vm.activeIcon=0;
            },200);
        }
  },
  components:{ 
  }
}
</script>


<style scoped lang="scss">
.clock_index_page{
    height:100%;
    background:#f9f9f9; 
    .header{
        height: 4rem;
        padding: .5rem .4rem 0 .4rem;
        background: -webkit-linear-gradient(right,#39E5C4,#3C9EDF); 
        background: -o-linear-gradient(right,#39E5C4,#3C9EDF); 
        background: -moz-linear-gradient(right,#39E5C4,#3C9EDF); 
        background: -mos-linear-gradient(right,#39E5C4,#3C9EDF); 
        background: linear-gradient(right,#39E5C4,#3C9EDF);
        border-bottom-left-radius: 20%;
        border-bottom-right-radius: 20%;
        position: relative;
        .clock_head_box{
            color:#fff; 
            .title{
                font-size:.506667rem; 
            }
            .head_box{
                display: flex;
                margin-top:.266667rem;
                align-items: center;
                justify-content: center;
                .head_img{
                    flex:0 0 1.333333rem;
                    height:1.333333rem;
                }
                .info-text{
                    flex:1;
                    padding-left:.4rem;
                    margin-top:.16rem;
                    font-size:.4rem;
                    span{
                        margin-right:.266667rem;
                    }
                }
            }
            
            .clock_head_tabs{
                position: absolute;
                bottom:-0.533333rem;
                left:0;
                width:100%;
                height:1.6rem; 
                padding:0 .266667rem;
                .clock_tabs_item{
                    width:100%;
                    height:100%;
                    background:#fff;
                    box-shadow: 0 8px 12px #ebedf0;
                    border-radius: .213333rem;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    .flex_item{
                        flex:1;
                        color:#999;
                    }
                }
            }
        }
    } 
    .clock_content{ 
        margin-top:1.066667rem;  
    }
}
    
</style>
